// 创建一个路由器，并暴露出去

// 第一步：导入 createRouter 方法
import { createRouter, createWebHistory } from 'vue-router'

import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'
import Detail from '@/pages/Detail.vue'

// 第二步：创建路由器
const router = createRouter({
  history: createWebHistory(), // 路由器的工作模式，vue3要有
  routes: [
    {
      name: '主页',
      path: '/home',
      component: Home
    },
    {
      name: '新闻',
      path: '/news',
      component: News,
      children: [
        {
          name: '详情',
          //path: 'detail/:id/:title/:content?', // 子级不用写斜杠/ // content? 加问号，代表可传可不传
          component: Detail,
          // 第一种写法：将路由收到的所有params参数作为props传给路由组件
          //props: true // 代表把path里的params参数，转为props传参 
          // 相当于<Detail :id="params.id" :title="params.title" :content="params.content"/> 
          // 不写props: true，相当于<Detail />

          path: 'detail',
          // 第二种写法：函数写法：可以自己决定将什么作为props给路由组件
          props: (route) => {
            return route.query
          }

          // 第三种写法：对象写法：可以自己决定将什么作为props给路由组件 // 不过是写死的方法，用第一种和第二中方法就行
          //props: {
          //  a: '232',
          //  b: '323',
          //  c: '456'
          //}
        }
      ]
    },
    {
      name: '关于',
      path: '/about',
      component: About
    }
  ]
})

export default router
